<template>
    <!--  -->
    <div style class="elTree_wrap elTreediv_wrap">
        <el-tree
            :data="departList"
            default-expand-all
            node-key="id"
            ref="tree"
            highlight-current
            :check-on-click-node="true"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            :props="defaultProps"
        >
            <span slot-scope="{ node, data }">
                <span class="el-tree-node__label" style="padding-left: 4px;" :title="node.label">
                    {{node.label}}
                    <span class="menuIcon">
                        <i class="el-icon-plus" @click="addDepart(node, data)"></i>
                        <i class="el-icon-edit" @click="editDepart(node, data)"></i>
                        <i class="el-icon-delete" v-if="data.pid" @click="deleteDepart(node, data)"></i>
                    </span>
                </span>
            </span>
        </el-tree>
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="Show"
            append-to-body
            center
            width="500px"
        >
            <div slot="title">{{EditTitle}}</div>
            <el-form
                :model="Edit"
                class="menu-setting"
                label-position="right"
                ref="Edit"
                label-width="110px"
                :rules="formRules"
                size="small"
            >
                <el-form-item label="上级机构" v-if="flag">
                    <select-tree v-model="Edit.pid" :options="departList" :props="defaultProps"></select-tree>
                </el-form-item>
                <el-form-item label="机构名称" prop="deptName">
                    <el-input v-model="Edit.deptName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="机构代码" prop="deptCode">
                    <el-input v-model="Edit.deptCode" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="备注" prop="deptDesc">
                    <el-input v-model="Edit.deptDesc" placeholder="请输入" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="Show = false"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="submitEdit"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import SelectTree from '@/components/SelectTree/SelectTree.vue';

export default {
    name: 'departShow',
    props: {
        departList: {
            type: Array,
            default: null,
        },
    },
    components: {
        SelectTree,
    },
    data() {
        return {
            defaultProps: {
                parent: 'pid',
                value: 'id',
                label: 'deptName',
                children: 'child',
            },
            EditTitle: '添加机构',
            Show: false,
            flag: true,
            Edit: {
                deptName: null,
                pid: null,
                deptCode: null,
                deptDesc: null,
            },
            formRules: {
                deptName: [{ required: true, message: '请输入机构名称', trigger: 'blur' },
                { max: 30, message: '字符最大长度为30', trigger: 'blur' }],
                deptCode: [{ required: true, message: '请输入机构代码', trigger: 'blur' },
                { max: 30, message: '字符最大长度为30', trigger: 'blur' }],
            },
        };
    },
    created() {

    },
    methods: {
        addDepart(node, data) {
            this.Show = true;
            this.EditTitle = '添加机构';
            this.Edit = {
                pid: data.id,
            };
            this.flag = true;
            // 解决一进来就进行表单验证问题
            if (this.$refs.Edit) {
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        handleNodeClick(data) {
            this.$emit('handleNodeClick', data);
        },
        editDepart(node, data) {
            this.Show = true;
            this.EditTitle = '编辑机构';
            this.Edit = JSON.parse(JSON.stringify(data));
            this.flag = true;
            if (this.$refs.Edit) {
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        submitEdit() {
            if (this.Edit.id) {
                // 编辑
                this.$refs.Edit.validate((valid) => {
                    if (valid) {
                        this.$post.departManage.updateDept(this.Edit)
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('修改成功！');
                                    this.$emit('getDepartInfo', this.Edit);
                                    this.Show = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            } else {
                // 添加
                this.$refs.Edit.validate((valid) => {
                    if (valid) {
                        this.$post.departManage.addDept(this.Edit)
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('添加成功！');
                                    this.$emit('getDepartInfo', this.Edit);
                                    this.Show = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            }
        },
        deleteDepart(node, item) {
            this.$confirm('确认删除该机构？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    this.$post.departManage.deleteDept({ id: item.id })
                        .then((res) => {
                            if (res.data.success) {
                                this.$message({
                                    message: '机构删除成功',
                                    type: 'success',
                                });
                                this.$emit('getDepartInfo', item);
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                });
        },
    },
};
</script>

<style lang='scss'>
.menuIcon {
    position: absolute;
    right: 6%;
    display: none;
    background: #f5f7fa;
    i {
        color: #409eff;
        font-size: 16px;
    }
    .el-icon-edit {
        margin: 0 4px;
    }
}
.elTreediv_wrap {
    text-align: right;
    height: 600px;
}
.el-tree-node__content:hover .menuIcon {
    display: inline-block;
}
</style>
